<template>
    <div class="g-dialog-container"
         v-loading="loading"
         element-loading-text="加载中"
         element-loading-spinner="el-icon-loading">
        <div class="flex-column-container"
             v-if="!loading">
            <el-form size='mini'
                     label-suffix='：'
                     :model='ruleForm'
                     status-icon
                     :rules='rules'
                     ref='ruleForm'
                     label-width='90px'
                     class='demo-ruleForm'>
                <div class="shade-text">
                    <el-form-item
                        style="width: 33%"
                        label='名称'
                        prop='name'>
                        <el-input show-word-limit
                                  maxlength='20'
                                  placeholder='请输入'
                                  size='mini'
                                  v-model='ruleForm.name'
                                  clearable
                                  @change="handleChange()"></el-input>
                    </el-form-item>
                    <el-form-item
                        style="width: 33%"
                        label="名称显示"
                        prop="titleShow">
                        <el-switch v-model="ruleForm.titleShow"
                                   active-color="#13ce66"
                                   inactive-color="#ff4949"
                                   :active-value="true"
                                   :inactive-value="false"
                                   @change="handleChange()">
                        </el-switch>

                    </el-form-item>
                    <el-form-item
                        style="width: 33%"
                        label='背景色'
                        prop='colour'>
                        <el-color-picker v-model="ruleForm.colour" @change="handleChange"></el-color-picker>
                    </el-form-item>
                    <el-form-item
                        style="width: 33%"
                        label='栅栏类型'
                        prop='allow'>
                        <el-radio-group v-model="ruleForm.allow">
                            <el-radio :label="true">禁入</el-radio>
                            <el-radio :label="false">禁出</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        style="width: 33%"
                        label="栅栏启用"
                        prop="enable">
                        <el-switch v-model="ruleForm.enable"
                                   active-color="#13ce66"
                                   inactive-color="#ff4949"
                                   :active-value="true"
                                   :inactive-value="false">
                        </el-switch>

                    </el-form-item>
                    <el-form-item
                        style="width: 100%"
                        label="标签"
                        prop="tagList">
                        <el-input style="width: 710px;margin-right: 5px;"
                                  show-word-limit
                                  size='mini'
                                  disabled
                                  :value='userNames'></el-input>
                        <i class="el-icon-edit" @click="onClickUser"></i>
                    </el-form-item>
                    <el-form-item label="栅栏设置"
                                  prop="setting">
                        <div class="shade-text">
                            <el-form-item class="setting-item"
                                          label-width="60px"
                                          label="X坐标"
                                          prop="x">
                                <el-input-number v-model="ruleForm.x"
                                                 @change="handleChange('pos')"
                                                 :min="0"
                                                 :max="width"
                                                 label="x坐标"></el-input-number>
                            </el-form-item>
                            <el-form-item class="setting-item"
                                          label-width="60px"
                                          label="Y坐标"
                                          prop="y">
                                <el-input-number v-model="ruleForm.y"
                                                 @change="handleChange('pos')"
                                                 :min="0"
                                                 :max="height"
                                                 label="y坐标"></el-input-number>
                            </el-form-item>
                            <el-form-item class="setting-item"
                                          label-width="50px"
                                          label="宽"
                                          prop="width">
                                <el-input-number v-model="ruleForm.width"
                                                 @change="handleChange('size')"
                                                 :min="0"
                                                 :max="width - ruleForm.x"></el-input-number>
                            </el-form-item>
                            <el-form-item class="setting-item"
                                          label-width="50px"
                                          label="高"
                                          prop="height">
                                <el-input-number v-model="ruleForm.height"
                                                 @change="handleChange('size')"
                                                 :min="0"
                                                 :max="ruleForm.y"></el-input-number>
                            </el-form-item>
                        </div>
                    </el-form-item>
                </div>
            </el-form>
            <div style="flex-grow: 1;overflow:auto;">
                <div class="map-box"
                     :style="{ backgroundImage:`url(${url})`}">
                    <canvas-page ref="fenceCanvas"
                                 :form-data="ruleForm"></canvas-page>
                </div>
            </div>
        </div>
        <div class='g-dialog-footer'>
            <el-button type='primary'
                       size='mini'
                       icon='el-icon-circle-check'
                       @click='handleSave'>保存
            </el-button>
            <el-button type='primary'
                       size='mini'
                       icon='el-icon-circle-close'
                       @click='handleCancel'>取消
            </el-button>
        </div>

        <!-- 添加/编辑员工  -->
        <el-dialog v-el-drag-dialog
                   custom-class="custom-dialog"
                   :visible.sync="dialog"
                   title="添加人员"
                   width="800px "
                   append-to-body>
            <div style="height: 500px">
                <AddItem v-if="dialog" :user-list="ruleForm.tagList" @save="onEmitSave" @close="dialog = false" />
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getCommonList } from '@/api/common'
import { colorOptions } from '@/common'
import CanvasPage from './map'
import AddItem from './userList.vue'

const validateWidth = (rule, value, callback) => {
    if (value === 0) {
        callback(new Error('宽度不能为0'))
    } else if (value > 0) {
        callback()
    }
}
const validateHeight = (rule, value, callback) => {
    if (value === 0) {
        callback(new Error('高度不能为0'))
    } else if (value > 0) {
        callback()
    }
}
export default {
    components: { CanvasPage, AddItem },
    props: {
        currentItem: Object
    },
    data() {
        return {
            url: config.imageUrl,
            height: config.height,
            width: config.width,
            loading: false,
            // 绑定用户的本地数据
            employId_pool: this.currentItem.tagList ? this.currentItem.tagList : [],
            ruleForm: {
                id: this.currentItem.id,
                enable: true,
                titleShow: true,
                name: '',
                colour: '#FF0000',
                allow: true,
                tagList: [],
                // 栅栏范围
                x: 0,
                y: 0,
                width: 0,
                height: 0
            },
            rules: {
                name: [{ required: true, trigger: 'blur', message: '栅栏名称不能为空' }],
                tagList: [{ required: true, trigger: 'blur', message: '人员不能为空' }],
                colour: [{ required: true, trigger: 'blur', message: '标签颜色不能为空' }],
                width: [{ required: true, validator: validateWidth, trigger: 'blur' }],
                height: [{ required: true, validator: validateHeight, trigger: 'blur' }]
            },
            colorOptions: colorOptions,
            positionOptions: [],
            employOptions: [],
            // 弹窗
            dialog: false
        }
    },
    created() {
        this.$startLoading()
        // 获取岗位列表
        getCommonList('position').then(res => {
            this.$endLoading()
            if (res.status !== 200) return this.$msgPrompt.error(res.msg)
            this.positionOptions = res.obj
        })
    },
    mounted() {
        for (let key in this.currentItem) {
            if (key == 'coordinate') {
                let { x, y, width, height } = this.setCoordinate(JSON.parse(this.currentItem.coordinate))
                this.ruleForm.x = x
                this.ruleForm.y = y
                this.ruleForm.width = width
                this.ruleForm.height = height
            } else if (key == 'tagList') {
                this.ruleForm[key] = this.currentItem.tagList
            } else {
                this.ruleForm[key] = this.currentItem[key]
            }
        }
        this.handleChange()

    },
    methods: {
        handleSave() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let { id, enable, titleShow, name, colour, allow, tagList } = this.ruleForm
                    let formData = {
                        enable,
                        titleShow,
                        name,
                        colour,
                        allow,
                        tagList: tagList.map(i => i.id),
                        coordinate: JSON.stringify(this.getPoints())
                    }
                    if (id) {
                        // 更新
                        this.$emit('update', { ...formData, id })
                    } else {
                        // 创建
                        this.$emit('create', formData)
                    }
                }
            })
        },
        handleCancel() {
            this.$emit('close')
        },
        onClickUser() {
            this.dialog = true
        },
        handleChange(type) {
            console.log(type)
            if (type == 'pos') {
                this.ruleForm.width = 0
                this.ruleForm.height = 0
            }
            this.$refs.fenceCanvas.updateProps()
        },
        // 获取坐标集合
        getPoints() {
            let arr = []
            let { x, y, width, height } = this.ruleForm
            // 左下为起点顺时间 四个顶点坐标
            let leftB = { x, y: y - height }
            let leftT = { x, y }
            let rightT = { x: x + width, y }
            let rightB = { x: x + width, y: y - height }
            arr.push(leftB, leftT, rightT, rightB)
            return arr
        },
        // 设置坐标
        setCoordinate(data) {
            let { x, y } = data[1]
            let width = data[2].x - x
            let height = data[2].y - data[0].y
            return { x, y, width, height }
        },
        onEmitSave(data) {
            this.ruleForm.tagList = data
            this.dialog = false
        }
    },
    computed: {
        userNames: function() {
            return this.ruleForm.tagList.map(i => i.name).join(',')
        }
    }
}
</script>
<style scoped lang="scss">
.g-dialog-container {
    .flex-column-container {
        flex-grow: 1;
    }

    .el-form {
        height: 180px;
    }

    .shade-text {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .el-input,
    .el-select {
        width: 180px;
    }

    .el-input-number {
        width: 120px;
    }

    .setting-item {
        //width: 180px;
        margin-right: 10px;
        margin-bottom: 10px;
        height: 29px;
        line-height: 29px;

        > span {
            display: inline-block;
            width: 60px;
            text-align: right;
        }
    }

    .el-form {
        margin: 10px 0;
    }

    .el-form-item {
        height: 29px;
    }

    .map-box {
        height: 402px;
        overflow: auto;
        margin: 0 23px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border: 1px solid #000000;
    }
}
</style>
